<template >
    <a-card title="系统参数" :bordered="false"   >
    <a-form-model :model="ServerInfo" :label-col="labelCol"
                  labelAlign="left"
                  :wrapper-col="wrapperCol">
        <a-form-model-item label="URL地址" help="请将服务器URL添加到开接入配置的URL地址栏">
            <a-input v-model="ServerInfo.url"
                     :size="inputSize"
                     disabled>
                <a-icon type="copy"   slot="addonAfter"
                        @click.prevent="runCopy(ServerInfo.url,$event)"
                />
            </a-input>
        </a-form-model-item>
        <a-form-model-item label="Token" help="请将Token值填写到微信公众平台内">
            <a-input v-model="ServerInfo.token"
                     :size="inputSize"
                     disabled>
                <a-icon type="copy"   slot="addonAfter"
                        @click.prevent="runCopy(ServerInfo.token,$event)"
                />
            </a-input>
        </a-form-model-item>
        <a-form-model-item label="安全域名" help="请将安全域名添加到公众平台">
            <a-input v-model="ServerInfo.domain"
                     :size="inputSize"
                     disabled>
                <a-icon type="copy"   slot="addonAfter"
                        @click.prevent="runCopy(ServerInfo.domain,$event)"
                />
            </a-input>
           </a-form-model-item>
            <a-form-model-item label="IP地址"    help="请将IP地址添加到公众号的IP白名单地址列表之内">
                <a-input v-model="ServerInfo.ip"
                         :size="inputSize"
                         disabled>
                    <a-icon type="copy"   slot="addonAfter"
                            @click.prevent="runCopy(ServerInfo.ip,$event)"
                    />
                </a-input>
            </a-form-model-item>
        <a-divider orientation="left">注意</a-divider>
        <p>务必将公众号的消息加解密方式 请设置为 <span class="text-pink">兼容模式或者安全模式</span></p>
    </a-form-model>
    </a-card>
</template>
<script>
    import Clipboard from 'clipboard';
    export default {
        props: ["ServerInfo",'appId'],
        data() {
            return {
                inputSize:"default",
                labelCol: {span: 4},
                wrapperCol: {span: 20},
            };
        },
        methods: {
            runCopy(text, event) {
                const clipboard = new Clipboard(event.target, {
                    text: () => text,
                });
                clipboard.on('success', () => {
                    this.$message.success('复制成功');
                    clipboard.destroy();
                });
                clipboard.on('error', () => {
                    this.$message.error('复制失败');
                    clipboard.destroy();
                });
                clipboard.onClick(event);
            }
        },
    };
</script>
<style scoped>
    .ant-form-item {
        margin-bottom: 20px;
    }
</style>
